<template>
    <div style="width: 1000px;height: 550px;" ref="chart"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { ref, onMounted } from 'vue';
let chart = ref();
const initChart = () => {
    let chartDom = chart.value;
    let myChart = echarts.init(chartDom);
    let ranking1 = ``;
    let colors = [
        '#98EECC', '#FF78C4', '#E4A5FF', '#30A2FF', '#FC4F00'
    ]
    let data = [
        { value: 60, name: 'Visit' },
        { value: 40, name: 'Inquiry' },
        { value: 20, name: 'Order' },
        { value: 80, name: 'Click' },
        { value: 100, name: 'Show' }
    ]
    // 用于补全园后面和矩形的 底色
    // 一查不能设置偏移；使用阴影偏移且同时背景色不能是透明的；这里和背景色一致
    let rich_items_z = {
        width: 15,
        height: 40,
        backgroundColor: 'rgba(255,255,255,1)',
        shadowColor: 'gold',
        shadowBlur: 0,
        shadowOffsetX: 54,
        shadowOffsetY: 0,
    }
    // 圆的
    let rich_items_a = {
        width: 50,
        height: 50,
        borderRadius: 200,
        align: 'center',
        // borderWidth: 1,
        // borderColor: '#333',
        backgroundColor: {    //排名用图；文字如果换行就多看一眼爆炸
            image: ranking1,
        },
        shadowColor: 'rgba(255,50,100,0.4)',
        shadowBlur: 6,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
    }
    // 矩形的
    let rich_items_b = {
        width: 145,
        height: 40,
        backgroundColor: 'gold',
        borderRadius: [0, 6, 6, 0],
        color: "white",
        padding: [0, 15, 0, 0]  // 细调文字居中
    }
    const rich_items = {};
    colors.map((v, k) => {
        let rich_items_z_key = 'z' + k;
        let rich_items_a_key = 'a' + k;
        let rich_items_b_key = 'b' + k;
        rich_items[rich_items_z_key] = { ...rich_items_z, shadowColor: v }
        rich_items[rich_items_a_key] = { ...rich_items_a }
        rich_items[rich_items_b_key] = { ...rich_items_b, backgroundColor: v }
    })

    data.map((v, k) => {
        v['labelColor'] = colors[k]
    })
    let option = {
        backgroundColor: '#fff',
        color: colors,
        title: {
            text: 'Funnel'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        legend: {},
        series: [
            {
                name: 'Funnel',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '60%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'ascending',
                gap: 2,
                label: {
                    show: true,
                    position: 'right',
                    formatter: (p) => {
                        console.log(p)
                        let k = p.dataIndex;
                        return `{z${k}|}{a${k}|} {b${k}|${p.data.name}}`
                    },
                    rich: rich_items
                },
                labelLine: {
                    length: 50,
                    show: false
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                data: data
            }
        ]
    };
    myChart.setOption(option);
}
onMounted(() => {
    initChart();
})
</script>

<style lang="less" scoped></style>